<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="com.ycxy.syt.DBDao"%>
<%@page import="java.sql.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<!-- saved from url=(0038)http://www.mmb.cn/wap/touch/catalog.do -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>这是分类的界面</title>    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="分类导航">
    <meta name="description" content="syt！">
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/catalog.css">
    <link rel="stylesheet" type="text/css" href="css/seacher.css">
    <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="js/sers.js"></script>
    <script type="text/javascript">
	var myScroll,myScrollri;
	var $ulLeft;var cataId = 0;
	
	function pullUpAction () {
		setTimeout(function () {
			myScrollri.refresh();
		}, 500);
	}
	
	function init_left_li(){
		var total_hei = $ulLeft.height();//总高度
		var li_height = $ulLeft.find("li").height();//单个li高度
		var li_num = $ulLeft.find("li").length;//个数
		console.log($ulLeft.find(".off").offset().top);
	}
	/**
	 * 初始化iScroll控件
	 */
	function loaded() {
		$ulLeft = $("#con_left");
		myScroll = new IScroll("#con_left",{
			mouseWheel: true,
			click: true,
			preventDefault: false,
			preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }
		})
		myScrollri = new IScroll("#con_right",{
			mouseWheel: true, click: true
		})
		myScrollri.on("scrollStart",function(){
			pullUpAction();
		});
		myScrollri.on("scroll",function(){
			pullUpAction();
		});
		myScrollri.on("scrollEnd",function(){
			$('.fr_ite_'+cataId).find("img").lazyload({
			   threshold: 200
			}).on('load', function() {
				 pullUpAction();
		    });
		});
		$('.job_sub li').eq(0).click();
	}
	//初始化绑定iScroll控件 
	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	document.addEventListener('DOMContentLoaded', loaded, false);
	
   /* 切换内容*/
   $(function(){
  	$('.job_sub li').click(function(){
        $(this).addClass('off').siblings().removeClass('off');
        var str = "#con_left li:nth-child("+($(this).index()+1)+")";
        setTimeout(function () {
        	myScroll.scrollToElement(document.querySelector(str));
        }, 300);
        cataId = $(this).attr("data-cataId");
        $('.fr_ite_'+$(this).attr("data-cataId")).removeClass('disp').siblings().addClass('disp');
        /* $('.fr_ite_'+$(this).attr("data-cataId")).find("img").lazyload({effect: "fadeIn"}); */
        pullUpAction();
        myScrollri.scrollTo(0,0,100, IScroll.utils.ease.elastic);
        /* myScrollri = new IScroll("#con_right",{
			mouseWheel: true, click: true
		}) */
    });
  	$(".fr_ite ul").each(function(){
    	if($(this).find("li").length == 1){
    		$(this).addClass("left_num1");
    	}else if($(this).find("li").length == 2){
    		$(this).addClass("left_num2");
    	}
    })
    $(".img_lazy").lazyload({effect: "fadeIn"});
   });
   
   /*隐藏浏览器的地址栏*/
   window.onload=srcTop;
   function srcTop(){
    setTimeout(function() {
   		window.scrollTo(0, 1)
   	}, 0);
   	if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
   		bodyTag = document.getElementsByTagName('body')[0];
   		bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
   	}
   };
   setInterval("myInterval()",1000);//1000为1秒钟
   function myInterval(){
   		$("body").height($(window).height());
   }
   
 	//去除空格
	function trimsd(str) {
		return str.replace(/\s/g, "");
	}
   $(function() {
	    $('#mou_input').focus(function() {
	    	window.scrollTo(0,0);
	        $('#ser_page').show();
	        $('#mou_input2').focus();
	        window.ontouchmove = function(e) {
	            e.preventDefault && e.preventDefault();
	            e.returnValue = false;
	            e.stopPropagation && e.stopPropagation();
	            return false;
	        }
	    });
	    var titleSearcher = trimsd($("#mou_input").val());
	    $('#close_serc').click(function() {
	        $('#ser_page').hide();
	        window.ontouchmove = function(e) {
	            e.preventDefault && e.preventDefault();
	            e.returnValue = true;
	            e.stopPropagation && e.stopPropagation();
	            return true;
	        }
	    });
	    $('#clear_val').click(function() {
	        $('#mou_input2').val('');
	    });
	    $('#clear_all').click(function() {
	        var myUrl = '/wap/touch/user.do?m=clearKeys';
	        $.ajax({
	            url: myUrl,
	            success: function(data) {
	                $('.page_content').html("<div id='no_ser'><img src='http://rep3.mmb.cn/wap/upload/touch/newWap/icon/qcno.png'/><br/><span>没有历史搜索记录</span></div>");
	            }
	        });
	    })
	})
	</script>
</head>
<body style="height: 667px;">
	<div class="new_wap_con" style="max-width:100%;">
		<div class="page_cons">
			<form method="post" action="http://www.mmb.cn/wap/shop/searchproduct.do">
			<div class="cons_ser" style="">
				<input type="text" name="keyword" id="mou_input" placeholder="春季新品潮包29起" value="小米6x新品上市" style="">
				<input type="submit" id="clear_val2" value="">
			</div>
			</form>
			<a id="close_serc2" href="shopp.jsp"></a>
		</div>
		<div id="ser_page">
		    <div class="page_cons">
		        <form method="post" id="formInput2" action="classify.jsp">
		            <div class="cons_ser">
		                <input type="text" name="keyword" id="mou_input2" placeholder="小米6x" value="小米 6x" autocomplete="off">
		                <span id="clear_val" class="clear_in_val2"></span>
		            </div>
		            <span id="close_serc">
		            </span>
		            <input type="button" id="sum_page" class="sum_page_form2" value="">
		        </form>
	        </div>
	        <script type="text/javascript">
	var mmbuidinput = 'so5bhxwt160905153409';
	var ipsinput = '59.172.239.214';
	var lxcPath = 'http://s.mmb.cn/';
</script>
<div class="page_conts">
   	 <div class="ui-search-filter-cont lxc_section">
          <ul class="ui-search-filter-opts_2" id="lxc_ul">
          </ul>
      </div>
      <div class="ui-search-filter-cont lxc_sec">
          <h1>热门搜索</h1>
          <% for( int j = 1 ; j < 10 ; j++ ){ %>
          <ul class="ui-search-filter-opts_1">
          	  <li><a href="undone.html">广告位<%=j %></a></li>
          <% } %>
          </ul>
      </div>
      <div class="ui-search-filter-cont lxc_sec">
      	<h1>历史记录</h1>
      	<div class="page_content">
      <div class="no_search">
            <span>没有历史搜索记录</span>
       </div>
       </div>
      </div>
  </div>

</div>
		<div class="l_left" id="con_left">
	        <!--标题-->
	        <ul class="job_sub" id="scroller1" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
	        <li class="off" data-cataid="78"><a href="javascript:void(0)javascript:void(0)">推荐</a></li>
			<li data-cataid="68" class=""><a href="javascript:void(0)javascript:void(0)">华为</a></li>
			<li data-cataid="60" class=""><a href="javascript:void(0)javascript:void(0)">苹果</a></li>
			<li data-cataid="1371" class=""><a href="javascript:void(0)javascript:void(0)">小米</a></li>
			<li data-cataid="1373" class=""><a href="javascript:void(0)javascript:void(0)">vivo</a></li>
			<li data-cataid="701" class=""><a href="javascript:void(0)javascript:void(0)">OPPO</a></li>
			<li data-cataid="141" class=""><a href="javascript:void(0)javascript:void(0)">三星</a></li>
			</ul>
	    </div>
	    <div class="l_right" id="con_right">
            <div class="rightBox" id="scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
			<!-- 二级  -->
				
		                    	<%
		                    	String[] sql = new String[8];
		                    	sql[0] = "select id , name , imgurl from products where category = 'vivo';";//这是推荐的手机
		                    	sql[1] = "select id , name , imgurl from products where category = '华为';";
		                    	sql[2] = "select id , name , imgurl from products where category = '苹果';";
		                    	sql[3] = "select id , name , imgurl from products where category = '小米';";
		                    	sql[4] = "select id , name , imgurl from products where category = 'vivo';";
		                    	sql[5] = "select id , name , imgurl from products where category = 'OPPO';";
		                    	sql[6] = "select id , name , imgurl from products where category = '三星';";
		                    	sql[7] = "select id , name , imgurl from products where category = '联想';";
		                    	
		                    	int arr[] = {78,68,60,1371,1373,701,141,10000,1375,701,141};
		                    	String brr[] = {"推荐","华为","苹果","小米","vivo","OPPO","三星","联想"};				
		                    	
		                    	int i = 0;
		                    	
		                    	 %>
			<% DBDao dao2 = new DBDao();
				
			 for( int j = 0 ; j < 8 ; j++ ) {%>	             
			
			<div class="fr_ite  fr_ite_<%=arr[j] %> disp" data-cataid="<%=arr[j] %>">
				<a href="https://s1.mi.com/pages/913eb3f7a1d5e28b3f30b2dda4f5569e/index.html">
						<img class="img1 img_lazy" data-original="photo/<%=brr[j] %> log.jpg" src="photo/小米 6x lb.jpg" style="display: inline;">
					</a>
					<!-- 二级数据显示 -->
							<!-- 三级显示 -->						
			                    <!-- 二级数据显示 -->
							<div class="sub_ites">
								<span><%=brr[j] %></span>
								<a href="shopp.jsp">
									全部商品
								</a>
							</div>
							<!-- 三级显示 -->						
		                    <ul>
		                    <%		                    
							ResultSet res2 = (dao2.queryBySQL(sql[j]));
								
							while(res2.next()){
								            
		                     %>
				                    <li>
			                        	<a href="artice.jsp?id=<%=res2.getString(2)%>">
				                            <img class="img_lazy" data-original="" src="<%=res2.getString(3) %>" style="display: inline;"><br>
				                            <span><%=res2.getString(2) %></span></a>
			                            </a>
			                        </li>
			                        <%
			                        i++;
			                        if( i % 3 == 0){
									%> </ur> <% 			                        
			                        } 
			                     }res2.close();
			                         %>
			                        </ul>
			                        
			                    <a class="all_cata" href="shopp.jsp">
                         <span>浏览全部商品</span>
                    </a>
               </div>  
               	<% } 		

			                dao2.closeRes();
			    %> 
		</div>	
		</div>
<script type="text/javascript"> 
     /*创建于2016-06-14*/ 
     var cpro_id = "u2671677";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/cm.js" type="text/javascript"></script>

</body></html>